<template>
	<view class="grid-columns-2 gap-12  ">
		<view @click="to(item)" class="flex flex-y-center gap-6 wa bg-white round-8 px-14 py-17"
			v-for="(item,index) in list" :key='item.type'>
			<image :src="item.image" class="w-40 h-40"></image>
			<view class="flex flex-column gap-8">
				<text class="fs-18 fw-600">{{item.title}}</text>
				<text class="fs-12 text-999">{{item.sub_title}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, reactive } from 'vue';
	import { getAppList } from '@/api/app.js'
	import { $page } from '@/utils';
	const list = reactive([{
			title: "形象克隆",
			sub_title: "1:1轻松复刻形象",
			path: '/pages/created/scene/index',
			image: '/static/image/fs.png',
			type: 'system'
		},
		{
			title: "声音克隆",
			sub_title: "高度还原你的音色",
			path: '/pages/created/voice/index',
			image: '/static/image/ys.png',
			type: 'system'
		}
	])
	onMounted(() => {
		getList()
	})


	const getList = () => {
		getAppList().then(res => {
			res.data.forEach((e) => {
				list.push({
					...e
				})
			})
		})
	}

	const to = (e) => {
		switch (e.type) {
			case 'system':
				$page.open(e.path)
				break;
			case 'oralCopy':
				$page.open('/pages/app/copywriting?id=' + e.id);
				break;
			case 'facialFusion':
				$page.open('/pages/app/facial_fusion');
			case 'photoHD':
				$page.open('/pages/app/photoHD');
			case 'oldPhotoRestoration':
				$page.open('/pages/app/oldPhotoRestoration');
			case 'hairStyle':
				$page.open('/pages/app/hairStyle');
				break;
		}
	}
</script>

<style>
</style>